import React, { Component } from 'react';


class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            bTrue:'ks',
            kaoshi:{
                name:'小红',
                class:'web1904',
                content:'react'
            }
        }
    }
    switchFn(e,sCls){
        this.setState({
            bTrue:sCls
        })
    }
    __handleChange(e){
        e.preventDefault();
        let name = e.target.name;
        let value = e.target.value;
        const kaoshi = this.state.kaoshi;
        kaoshi[name] = value;
        this.setState({kaoshi});
    }
    render(){
        return(
            <div className={`kaoshi ${this.state.bTrue}`}>
                <h3>这是考试内容</h3>
                <div className="kaishi">
                    <p>一、准备开始考试</p>
                    <input  className="input" onClick={(e)=>this.switchFn(e,'kk')} type="button" value="开始考试"/>
                </div>
                <div className="kaikao">
                    <p>二、开始考试</p>
                    <ul>
                        <li><label>姓名：</label><input className="inp" type="text" name="name" onChange={(e) => this.__handleChange(e)} placeholder="请输入姓名" value={this.state.kaoshi.name}/></li>
                        <li><label>班级：</label><input className="inp" type="text" name="class" onChange={(e) => this.__handleChange(e)} placeholder="请输入班级" value={this.state.kaoshi.class}/></li>
                        <li><label>考试内容：</label><textarea className="text" name="content" onChange={(e) => this.__handleChange(e)} placeholder="请输入考试内容" value={this.state.kaoshi.content}></textarea></li>
                    </ul>
                    <input className="input"  onClick={(e)=>this.switchFn(e,'sj')} type="button" value="准备上机"/>
                </div>
                <div className="shangji">
                    <ul>
                        <li>{this.state.kaoshi.name}</li>
                        <li>{this.state.kaoshi.class}</li>
                        <li>{this.state.kaoshi.content}</li>
                    </ul>
                    <p>三、上机了</p>
                    <input  className="input" onClick={(e)=>this.switchFn(e,'wc')} type="button" value="完成上机"/>
                </div>
                <div className="wancheng">
                    <p>四、我已完成所有考试，准备进入面试环节</p>
                    <input className="input" onClick={(e)=>this.switchFn(e,'ms')} type="button" value="准备面试"/>
                </div>
                <div className="mianshi">
                    <p>五坐等面试</p>
                    <input className="input" onClick={(e)=>this.switchFn(e,'ks')} type="button" value="返回首页"/>
                </div>
            </div>
        )
    }
}
export default View;
